<!--
 * @Author: hu_binbin
 * @Date: 2021-08-17 20:48:10
 * @LastEditTime: 2021-08-17 21:40:29
 * @Description: 作业卡
-->
<template>
    <div style="margin-top: 1rem;">
        <div class="content-title">
            <div class="content-left">
                <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                <span style="margin-left: 0.4rem;">巡视作业卡</span>
            </div>
            <div class="content-right">
                <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                <span style="margin-left: 0.4rem;color:#1EB69E;">集中抄录</span>
            </div>
        </div>
        <div class="tabs">
            <div class="tabs-btn">
                <div class="btn">设备类型</div>
                <div class="btn active">间隔单元</div>  
            </div>
            <div>
                <van-collapse v-model="activeNames">
                    <van-collapse-item title="主变压器" name="1">
                        <van-collapse class="coll-item" v-model="actives">
                            <van-collapse-item title="1#主变" name="1">
                                55555
                            </van-collapse-item>
                            <van-collapse-item name="2">
                                <template slot="title">
                                    <span>短路器</span>
                                    <span class="defect">未消除缺陷：1</span>
                                    <span class="hidden">未处理隐患：1</span>
                                </template>
                                <span>2#主变</span>
                            </van-collapse-item>
                        </van-collapse>
                    </van-collapse-item>
                    <van-collapse-item title="短路器" name="2">
                        888888
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
name:"workCard",
props: {
},
data() {
    return {
        subName: "",
        icon: {
            iconTitle: require("../../../../assets/tour/icon-title.png"),
        },
        activeNames: ['1'],
        actives:['1'],
    }
},
methods: {
    openTime() {

    },
    focus() {

    },
},
};
</script>

<style scoped>
    .content-title{
        display: flex;
        border-radius: 0.7rem;
        margin: 0.5rem;
        font-size: 0.8rem;
        color:#333;
    }
    .tabs-btn{
        display: flex;
        justify-content: center;
        margin: 0.5rem 0;
    }
    .content-left{
        width: 50%;
        display: flex;
        align-items: center;
    }
    .content-right{
        flex:1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .defect{
        font-size:0.8rem;
        color:#F3757A;
    }
    .hidden{
        font-size:0.8rem;
        margin-left:0.5rem;
        color:#FFB56C;
    }
    .btn{
        background: #fff;
        width: 6rem;
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        color:#333;
        font-size: 0.8rem;
        border-radius: 0.5rem 0 0 0.5rem;
        border: 1px solid #F6F6F6;
    }
    .active{
        color:#1EB69E;
        background:#E7F7F5;
        border: 1px solid #B2E2DB;
        border-radius: 0 0.5rem 0.5rem 0rem;
    }
    .coll-item /deep/ .van-cell{
        background: #f6f6f6;
    }
</style>
